import React, { Component } from 'react';
import styles from './marketRisk.less';
import { connect } from 'dva';
import getUrlParam from '@/utils/getUrlParam';
import initChart from '@/utils/initChart';
import { Tabs, Icon } from 'antd';
import { getMarginFinanceOption, getEquityOption } from '@/utils/warning-figure-chart.js';

@connect(({ marketrisk }) => ({
  marginFinanceData: marketrisk.marginFinanceData,
  equityData: marketrisk.equityData,
  indexInfoData: marketrisk.indexInfoData,
}))
class marketRisk extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'marketrisk/getMarginFinanceData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });
    dispatch({
      type: 'marketrisk/getEquityData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });
    dispatch({
      type: 'marketrisk/getIndexInfoData',
      payload: {
        stock_code: JSON.parse(sessionStorage.getItem('LOGIN_INFO')).stock_code || '000001',
      },
    });
  }

  render() {
    const TabPane = Tabs.TabPane;
    let changeTab = key => {
      console.log(key);
    };

    let { marginFinanceData, equityData, indexInfoData } = this.props;

    equityData = {
      data: {
        is_exceed_msg: '超过',
        total_share_rate: 0.1812,
        data_list: [
          {
            shareholder_name: '深圳中农大科技投资有限公司',
            pledge_share_amount: '15,216,069',
            pledge_of_pledger: '63.73',
            pledge_of_total_share: '18.12',
            pledge_date: '2018-12-22',
          },
        ],
      },
      code: 0,
      message: '请求响应成功',
    };
    if (
      marginFinanceData &&
      marginFinanceData.data &&
      document.getElementById('marginFinanceChart')
    ) {
      // console.log(marginFinanceData);
      initChart(getMarginFinanceOption('', marginFinanceData.data.data_list), 'marginFinanceChart');
    }

    let getCapital = () => {
      let result = [];
      if (indexInfoData && indexInfoData.data) {
        if (!indexInfoData.data.capital_transaction_flag) {
          return '暂无数据';
        }

        let getDom = _DataObj => {
          let _result = [];
          let imgDom = [];
          imgDom.push(
            <div>
              <p>{_DataObj.index_type}</p>
            </div>
          );
          for (var i = 0; i < _DataObj.value_list.length; i++) {
            if (i === 0) {
              _result.push(
                <tr>
                  <td rowSpan={_DataObj.value_list.length} className={styles.specialTd}>
                    {imgDom}
                  </td>
                  <td>{_DataObj.value_list[i].index_name}</td>
                  <td>{_DataObj.value_list[i].index_value}</td>
                </tr>
              );
            } else {
              _result.push(
                <tr>
                  <td>{_DataObj.value_list[i].index_name}</td>
                  <td>{_DataObj.value_list[i].index_value}</td>
                </tr>
              );
            }
          }

          return _result;
        };
        return (
          <div className={styles.placardsWrap}>
            <table className={styles.placardsTable}>
              <thead className={styles.placardsHead}>
                <tr>
                  <th className={styles.placardsHeadCell}>指标类型</th>
                  <th className={styles.placardsHeadCell}>指标名称</th>
                  <th className={styles.placardsHeadCell}>指标值</th>
                </tr>
              </thead>

              <tbody className={styles.placardsBody}>
                {getDom(indexInfoData.data.capital_transaction[0])}
              </tbody>

              <tbody className={styles.placardsBody}>
                {getDom(indexInfoData.data.capital_transaction[1])}
              </tbody>

              <tbody className={styles.placardsBody}>
                {getDom(indexInfoData.data.capital_transaction[2])}
              </tbody>
            </table>
          </div>
        );
      }
    };

    let getPlacards = () => {
      let result = [];
      if (indexInfoData && indexInfoData.data) {
        if (!indexInfoData.data.placards_tips_flag) {
          return '暂无数据';
        }
        let bxgsData = indexInfoData.data.placards_tips.baoxiangongsi;
        let cyzbData = indexInfoData.data.placards_tips.chanyeziben;
        let smjjData = indexInfoData.data.placards_tips.simujijin;

        let getDom = _DataObj => {
          let _result = [];
          let imgDom = [];

          if (_DataObj.index_type === '保险公司') {
            imgDom.push(
              <div>
                <img src={require('./images/bxgs.png')} />
                <p>{_DataObj.index_type}</p>
              </div>
            );
          } else if (_DataObj.index_type === '产业资本') {
            imgDom.push(
              <div>
                <img src={require('./images/cyzb.png')} />
                <p>{_DataObj.index_type}</p>
              </div>
            );
          } else {
            imgDom.push(
              <div>
                <img src={require('./images/smjj.png')} />
                <p>{_DataObj.index_type}</p>
              </div>
            );
          }
          for (var i = 0; i < _DataObj.value_list.length; i++) {
            if (i === 0) {
              _result.push(
                <tr>
                  <td rowSpan={_DataObj.value_list.length} className={styles.specialTd}>
                    {imgDom}
                  </td>
                  <td>{_DataObj.value_list[i].index_name}</td>
                  <td>{_DataObj.value_list[i].index_range}</td>
                  <td>{_DataObj.value_list[i].index_value}</td>
                  <td>
                    {_DataObj.value_list[i].index_flag == 'down' ? (
                      <img src={require('./images/down.png')} />
                    ) : (
                      <img src={require('./images/up.png')} />
                    )}
                  </td>
                </tr>
              );
            } else {
              _result.push(
                <tr>
                  <td>{_DataObj.value_list[i].index_name}</td>
                  <td>{_DataObj.value_list[i].index_range}</td>
                  <td>{_DataObj.value_list[i].index_value}</td>
                  <td>
                    {_DataObj.value_list[i].index_flag == 'down' ? (
                      <img src={require('./images/down.png')} />
                    ) : (
                      <img src={require('./images/up.png')} />
                    )}
                  </td>
                </tr>
              );
            }
          }

          return _result;
        };
        return (
          <div className={styles.placardsWrap}>
            <table className={styles.placardsTable}>
              <thead className={styles.placardsHead}>
                <tr>
                  <th className={styles.placardsHeadCell}>机构</th>
                  <th className={styles.placardsHeadCell}>指标</th>
                  <th className={styles.placardsHeadCell}>指标值</th>
                  <th className={styles.placardsHeadCell}>范围</th>
                  <th className={styles.placardsHeadCell}>风险</th>
                </tr>
              </thead>

              <tbody className={styles.placardsBody}>{getDom(bxgsData)}</tbody>

              <tbody className={styles.placardsBody}>{getDom(cyzbData)}</tbody>

              <tbody className={styles.placardsBody}>{getDom(smjjData)}</tbody>
            </table>
          </div>
        );
      }
    };

    let equityMsg = {
      shareholder_name: '',
      pledge_share_amount: '',
      pledge_of_pledger: '',
      pledge_of_total_share: '',
      pledge_date: '',
    };
    if (equityData && equityData.data && document.getElementById('tipChart')) {
      // console.log(marginFinanceData);
      // console.log(equityData.data.data_list[0]);
      equityMsg = equityData.data.data_list[0];
      initChart(getEquityOption('', equityData.data.data_list), 'tipChart');
    }
    return (
      <div className={[styles.commonWrap, 'clearfix'].join(' ')}>
        <div className={styles.commonCol}>
          <div className={[styles.blockWrap, styles.abnormalWrap].join(' ')}>
            <div className={styles.blockHead}>
              <p>两融警戒提示</p>
            </div>
            <div
              className={[styles.blockBody, styles.paddingBody].join(' ')}
              style={{ height: '454px' }}
              id="marginFinanceChart"
            />
          </div>

          <div style={{ width: '100%', height: 'calc(100% - 497px)' }}>
            <iframe
              src="https://stockdata.cfbond.com/market_webapp/market/stockTrend.do?en_prod_code=000002.SZ"
              frameBorder="0"
              style={{ width: '100%', height: '100%' }}
            />
          </div>
        </div>
        <div className={styles.commonCol}>
          <div className={[styles.tabWarning, 'special-tab'].join(' ')}>
            <Tabs defaultActiveKey="1" onChange={changeTab}>
              <TabPane tab="市值异动提示" key="1">
                {getCapital()}
              </TabPane>
              <TabPane tab="举牌风险预警" key="2">
                {getPlacards()}
              </TabPane>
            </Tabs>
          </div>
        </div>
        <div className={styles.commonCol}>
          <div
            className={[styles.blockWrap, styles.abnormalWrap].join(' ')}
            style={{ height: '100%' }}
          >
            <div className={styles.blockHead}>
              <p>第一大股东股权质押风险提示</p>
            </div>
            <div
              className={[styles.blockBody, styles.paddingBody].join(' ')}
              style={{ height: 'calc(100% - 43px)', padding: '20px' }}
            >
              <p className={styles.tipTitle}>
                <Icon
                  type="exclamation-circle"
                  theme="filled"
                  style={{ color: '#D99F62', marginRight: '5px' }}
                />
                {equityMsg.shareholder_name}股权质押率<span>超过</span>持股比例50%
              </p>

              <div id="tipChart" className={styles.tipChart} />

              <table className={styles.tipTable}>
                <tbody>
                  <tr>
                    <td>股东名称</td>
                    <td>{equityMsg.shareholder_name}</td>
                  </tr>
                  <tr>
                    <td>最新质押股票数量（股）</td>
                    <td>{equityMsg.pledge_share_amount}</td>
                  </tr>
                  <tr>
                    <td>累计质押股票数量占其持股数量比例（%）</td>
                    <td>{equityMsg.pledge_of_pledger}</td>
                  </tr>
                  <tr>
                    <td>累计质押股票数量占公司总股本比例（%）</td>
                    <td>{equityMsg.pledge_of_total_share}</td>
                  </tr>
                  <tr>
                    <td>最新质押公告日期</td>
                    <td>{equityMsg.pledge_date}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default marketRisk;
